<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/static/bootstrap/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap/bootstrap.min.js"></script>


    <!-- JS 引用顺序: jquery, underscore, backbone -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone.js"></script>
</head>
<body>
    <h3>backbone.js</h3>

    <div class="container-fluid">
        <table class="table table-bordered table-striped" id="id_table">
            <thead>
                <tr>
                    <td>ID</td>
                    <th>图片</th>
                    <th>标题</th>
                    <th>来源频道</th>
                    <th>详情</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
##                 {% for news in page.object_list %}
##                 <tr>
##                     <td>{{ news.id }}</td>
##                     <td>
##                         <img src="{{ news.img }}" height="120" width="160">
##                     </td>
##                     <td><a href="{{ news.link }}">{{ news.title }}</a></td>
##                     <td>{{ news.source }}<br>{{ news.channel_name }}({{ news.channel_id }})</td>
##                     <td>{{ news.desc }}</td>
##                     <td>{{ news.datetime_publish }}</td>
##                 </tr>
##                 {% endfor %}
            </tbody>
        </table>
    </div>




    <div id="id_container"></div>

    <script type="text/template" id="id_template">
        <label><%= key %></label>
        <input type="text" id="id_input" />
        <input type="button" id="id_button" value="Submit" />
    </script>


    <script>
        (function($){
            var NewsView = Backbone.View.extend({
                el: $("#id_container"),
                initialize: function(){
                    console.log('NewsView initialized');
                    this.render({
                        key: "value"
                    });
                },
                render: function(context){
                    //使用 underscore 编译模板
                    var template = _.template($("#id_template").html());
                    //加载模板到对应的 el 属性中
                    // $(this.el) 等价于 this.$el
                    // this.$el.html(template(context));
                    $(this.el).html(template(context));
                },
                events: {
                    'click input[type=button]' : 'my_func'
                },
                my_func: function(event){
                    console.log('event=');
                    console.log(event);
                    alert("input: " + $("#id_input").val());
                }
            });

            var newsView = new NewsView();

        })(jQuery);
    </script>


</body>
</html>
